<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
		body>div{
			width:200px;
			border: 4px solid #ccc;
			border-radius:4px;   /*圆角  */
			margin: 0 auto;     /* 居中 */
			overflow: hidden;  /* 解决不自动识别高度 */
			padding-bottom: 4px; /*大的div与按钮的距离下内边距4px;  */
		}
		input{
			width: 45px;
			height: 45px;
			border-radius:4px;   /*圆角  */
			margin: 0 auto;     /* 居中 */
			float:left;       /*向左浮动 目的 取消换行时的空格*/
			margin: 4px 0 0 4px; 
		}
		div>div{
			width: 135px;
			height: 37px;
			border: 4px solid #ccc;
			border-radius:4px;
	
			margin: 4px 0 0 4px; 
			float:left;     /* 让小的div向左浮动  */
			overflow: hidden; /*   超出文本的内容不显示 */
			line-height: 37px;
		}
</style>
<script type="text/javascript">
	function myfn(str){
		if(str=="C"){
			d1.innerText = "";
		}else if(str=="="){
			//计算并把结果显示带div中
			d1.innerText = eval(d1.innerText);	
		}else{//数字和运算符
			d1.innerText+=str;	
		}
	}
</script>
</head>
<body>
<div>
	<h1 align="center">简易计算器</h1>
	<hr>
	<div id="d1"></div>
		<input type="button"value="C" onclick="myfn('C')">
		<input type="button"value="7" onclick="myfn('7')">
		<input type="button"value="8" onclick="myfn('8')">
		<input type="button"value="9" onclick="myfn('9')">
		<input type="button"value="/" onclick="myfn('/')">
		<input type="button"value="4" onclick="myfn('4')">
		<input type="button"value="5" onclick="myfn('5')">
		<input type="button"value="6" onclick="myfn('6')">
		<input type="button"value="*" onclick="myfn('*')">
		<input type="button"value="1" onclick="myfn('1')">
		<input type="button"value="2" onclick="myfn('2')">
		<input type="button"value="3" onclick="myfn('3')">
		<input type="button"value="-" onclick="myfn('-')">
		<input type="button"value="0" onclick="myfn('0')">
		<input type="button"value="." onclick="myfn('.')">
		<input type="button"value="=" onclick="myfn('=')">
		<input type="button"value="+" onclick="myfn('+')">

</div>
</body>
</html>